<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<style type="text/css">
		.active {
			color: #FF5053;
			border-bottom: 1px solid #FF5053;
		}
		body{
			background: #efeff4;
		}
	</style>
	<body>
		<div class="mui-content">
			<div class="mui-row order_nav">
				<div class="mui-col-xs-3 active">
					全部订单
				</div>
				<div class="mui-col-xs-3">
					已支付
				</div>
				<div class="mui-col-xs-3">
					已预约
				</div>
				<div class="mui-col-xs-3">
					已完成
				</div>
			</div>
			<div class="mui-row order_goods_group">
				<div class="mui-col-xs-12 order_goods_list">
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<div class="mui-row">
								<div class="mui-col-xs-8">
									<h5>订单编号:4646461646546164</h5>
								</div>
								<div class="mui-col-xs-4">
									<span class="mui-pull-right" style="color: #FF5053;font-size: 1.0625rem;">交易完成</span>
								</div>
							</div>
							</div>
						<div class="mui-col-xs-2"><img src="images/pic_17.jpg" ></div>
						<div class="mui-col-xs-8">
							<h5>2大1小超值家庭套餐！日式温泉+泳池+豪华大床房/双床房+自助晚餐+自助早餐</h5>
							<p>香辣虾餐 </p>
						</div>
						<div class="mui-col-xs-2">
							<h5  style="color: #FF5053;text-align: right;font-size: 1.0625rem;margin-bottom: 0.625rem;">￥99</h5>
							<h5  style="color: #666666;text-align: right;">x 1</h5>
						</div>
						<div class="mui-col-xs-12">
							<p style="text-align: right;">共1件商品 合计：<span style="color: #333333;font-size: 1.0625rem;">￥99</span> (含运费0.00元)</p>
							<p style="text-align: right;">2020-03-15 19:16:00</p>
						</div>
					</div>
				</div>
				<div class="mui-col-xs-12 order_goods_list">
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<div class="mui-row">
								<div class="mui-col-xs-8">
									<h5>订单编号:4646461646546164</h5>
								</div>
								<div class="mui-col-xs-4">
									<span class="mui-pull-right" style="color: #2AC845;font-size: 1.0625rem;">已支付</span>
								</div>
							</div>
							</div>
						<div class="mui-col-xs-2"><img src="images/pic_17.jpg" ></div>
						<div class="mui-col-xs-8">
							<h5>2大1小超值家庭套餐！日式温泉+泳池+豪华大床房/双床房+自助晚餐+自助早餐</h5>
							<p>香辣虾餐 </p>
						</div>
						<div class="mui-col-xs-2">
							<h5  style="color: #2AC845;text-align: right;font-size: 1.0625rem;margin-bottom: 0.625rem;">￥99</h5>
							<h5  style="color: #666666;text-align: right;">x 1</h5>
						</div>
						<div class="mui-col-xs-12">
							<p style="text-align: right;">共1件商品 合计：<span style="color: #333333;font-size: 1.0625rem;">￥99</span> (含运费0.00元)</p>
							<p style="text-align: right;">2020-03-15 19:16:00</p>
						</div>
					</div>
				</div>
				<div class="mui-col-xs-12 order_goods_list">
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<div class="mui-row">
								<div class="mui-col-xs-8">
									<h5>订单编号:4646461646546164</h5>
								</div>
								<div class="mui-col-xs-4">
									<span class="mui-pull-right" style="color: #F0AD4E;font-size: 1.0625rem;">已预约</span>
								</div>
							</div>
							</div>
						<div class="mui-col-xs-2"><img src="images/pic_17.jpg" ></div>
						<div class="mui-col-xs-8">
							<h5>2大1小超值家庭套餐！日式温泉+泳池+豪华大床房/双床房+自助晚餐+自助早餐</h5>
							<p>香辣虾餐 </p>
						</div>
						<div class="mui-col-xs-2">
							<h5  style="color: #F0AD4E;text-align: right;font-size: 1.0625rem;margin-bottom: 0.625rem;">￥99</h5>
							<h5  style="color: #666666;text-align: right;">x 1</h5>
						</div>
						<div class="mui-col-xs-12">
							<p style="text-align: right;">共1件商品 合计：<span style="color: #333333;font-size: 1.0625rem;">￥99</span> (含运费0.00元)</p>
							<p style="text-align: right;">2020-03-15 19:16:00</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui('body').on('tap','a',function(){
			          window.top.location.href=this.href;
			   });
			$(function(){
				$('.order_nav .mui-col-xs-3').click(function(){
					$('.order_nav .mui-col-xs-3').removeClass('active')
					$(this).addClass('active')
				})
			})
		</script>
	</body>

</html>
